<template>
	<view class="page">
		<navigation :titleColor="titleColor" style="z-index: 9999999999;" class="header_navigation" barColor="#333333" textColor="#333333" defaultButton="back">
			机构详情
		</navigation>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scroll="pageScroll" @scrolltolower="scrollBottom">
			<view class="header">
				<swiper
					class="header_swiper"
					:current="swiperCurrent"
					@change="changeSwiper"
					:indicator-dots="false"
					:autoplay="true"
					:interval="3000"
					:duration="1000"
					:circular="true"
				>
					<swiper-item v-for="(item, index) in detail.images" :key="index">
						<view class="swiper-item"><image class="image" :src="item" mode=""></image></view>
					</swiper-item>
				</swiper>
				<view class="dots" v-if="detail.images && detail.images.length > 1">
					<block v-for="(item, index) in detail.images.length" :key="item"><view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view></block>
				</view>
			</view>
			<view class="info_panel">
				<view class="info_header">
					<view class="title">{{ detail.name }}</view>
					<view class="ranking">NO.{{ ranking }}</view>
				</view>
				<view class="info_footer">
					<view class="label">服务评价：</view>
					<view class="rate_panel"><uni-rate :size="12" :value="detail.companyStarNum" :disabled="true" disabledColor="#f6a749" /></view>
				</view>
			</view>
			<view class="intro">
				<view class="title">机构简介</view>
				<view class="text">{{ detail.companyDetails }}</view>
			</view>
			<view class="serve_panel">
				<view class="title_panel">
					<view class="title">机构服务</view>
					<view class="count">{{ detail.instituteNum || 0 }}项</view>
				</view>
				<view class="list">
					<view class="list_item" v-for="(listItem, index) in dataList" :key="index" @tap="toDetail(listItem)">
						<image class="image" :src="listItem.image" mode=""></image>
						<view class="info">
							<view class="info_header">
								<viwe class="title">
									<view class="titile_text">{{ listItem.name }}</view>
									<view class="sign green" v-if="listItem.zhengce == enums['服务政策']['公益']">公益</view>
									<view class="sign orange" v-if="listItem.zhengce == enums['服务政策']['常规']">常规</view>
								</viwe>
								<view class="pirce" v-if="listItem.money && listItem.money > 0">{{ '￥' + listItem.money + '/次' }}</view>
								<view class="pirce gratis" v-else>免费</view>
							</view>
							<view class="info_container">
								<view class="text">{{ listItem.content }}</view>
							</view>
							<veiw class="info_footer">
								<view class="organization">·{{ listItem.companyName }}</view>
								<view class="count">{{ listItem.count }}人购买</view>
							</veiw>
						</view>
					</view>
				</view>
				<view class="no-data">
					<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import * as modelApi from '@/api/userApi/model.js';
import { uniRate } from '@dcloudio/uni-ui';
export default {
	components: {
		uniRate
	},
	data() {
		return {
			enums: this.$enums,
			id: '',
			ranking: '',
			swiperCurrent: 0,
			titleColor: 'rgba(255,255,255,0)',
			detail: {
				instituteNum: 0,
				companyStarNum: 0,
				images: [],
				serveList: []
			},
			dataList: [],
			// more
			moreStatus: 'more',
			moreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			searchModel: {
				id: '',
				current: 1,
				size: 10
			}
		};
	},
	methods: {
		getDetail(id) {
			modelApi
				.queryAgencyDetails({ id: id })
				.then(res => {
					if (res.code === 0) {
						this.detail = res.data;
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		getList() {
			this.moreStatus = 'loading';
			this.searchModel.id = parseInt(this.id);
			modelApi
				.queryServiceInfo(this.searchModel)
				.then(res => {
					if (res.code === 0) {
						if (this.searchModel.current == 1) {
							this.dataList = [];
						}
						if (res.data && res.data.length == 10) {
							this.moreStatus = 'more';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else if (res.data && res.data.length < 10) {
							this.moreStatus = 'noMore';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else {
							this.moreStatus = 'noMore';
						}
					}
				})
				.catch(e => {
					this.moreStatus = 'noMore';
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		changeSwiper(e) {
			this.swiperCurrent = e.detail.current;
		},
		toDetail(data) {
			uni.navigateTo({
				url: `/pages/serve/serveDetail/serveDetail?id=${data.id}`
			});
		},
		pageScroll(event) {
			let scrollTop = parseInt(event.detail.scrollTop);
			let matrixingColor = (scrollTop - 20) / 100;
			this.pageScrollStyle(matrixingColor);
		},
		pageScrollStyle(matrixing) {
			this.titleColor = 'rgba(255,255,255,' + matrixing + ')';
		},
		// 滑动到底部。分页处理
		scrollBottom() {
			this.getList();
		}
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.ranking = options.index;
			this.getDetail(options.id);
			this.getList();
		}
	}
};
</script>

<style lang="stylus">
.page_scroll
	position absolute
	top 0rpx
	right 0rpx
	bottom 0rpx
	left 0rpx
.header
	width 100%
	position relative
	.header_navigation
		position absolute
		top 0rpx
		z-index 9
	.header_swiper
		width 100%
		height 510rpx
		.swiper-item, .image
			width 100%
			height 100%
	.dots
		position absolute
		bottom 10rpx
		left 50%
		// 这里一定要注意兼容不然很可能踩坑
		transform translate(-50%, 0)
		-webkit-transform translate(-50%, 0)
		z-index 9
		display flex
		flex-direction row
		justify-content center
		.dot
			width 28rpx
			height 8rpx
			background rgba(196, 196, 196, 1)
			border-radius 4rpx
			margin-right 20rpx
		.active
			background rgba(255, 66, 0, 1)
.info_panel
	padding 30rpx 30rpx 40rpx 30rpx
	box-sizing border-box
	.info_header
		display flex
		align-items center
		justify-content space-between
		.title
			font-size 36rpx
			font-family PingFang SC
			font-weight 500
			color #FF4200
		.ranking
			font-size 32rpx
			font-family PingFang SC
			font-weight bold
			color #FF7D21
	.info_footer
		padding-top 40rpx
		box-sizing border-box
		display flex
		align-items center
		.label
			font-size 24rpx
			font-family PingFang SC
			font-weight 400
			color #999999
		.rate_panel
			margin-left 10rpx
.intro
	border-top 16rpx solid rgba(246, 246, 246, 1)
	padding 40rpx 30rpx 30rpx 30rpx
	box-sizing border-box
	.title
		font-size 32rpx
		font-family PingFang SC
		font-weight 500
		color #333333
		letter-spacing 1rpx
	.text
		margin-top 20rpx
		text-indent 2em
		font-size 28rpx
		font-family PingFang SC
		font-weight 400
		color #666666
		line-height 42rpx
		letter-spacing 1rpx
.serve_panel
	padding 0rpx 30rpx
	box-sizing border-box
	border-top 16rpx solid rgba(246, 246, 246, 1)
	.title_panel
		display flex
		justify-content space-between
		align-items center
		height 100rpx
		.title
			font-size 32rpx
			font-family PingFang SC
			font-weight 400
			color #333333
		.count
			font-size 24rpx
			font-family PingFang SC
			font-weight 600
			color #999999
	.list
		width 100%
		background-color #FFFFFF
		.list_item
			width 100%
			display flex
			justify-content space-between
			padding 30rpx 0rpx
			box-sizing border-box
			&:first-child
				padding-top 0rpx
			.image
				width 204rpx
				height 204rpx
				border-radius 23rpx
			.info
				flex 1
				margin-left 20rpx
				box-sizing border-box
				display flex
				flex-direction column
				justify-content space-between
				.info_header
					width 100%
					display flex
					justify-content space-between
					.title
						flex 1
						margin-right 10rpx
						letter-spacing 1rpx
						font-size 32rpx
						font-family PingFang SC
						font-weight 400
						color #333333
						display flex
						.titile_text
							flex 1
							overflow hidden
							text-overflow ellipsis
							display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
							-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
							-webkit-line-clamp 1 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
							word-wrap break-word
						.sign
							margin-left 10rpx
							font-size 28rpx
							font-family PingFang SC
							font-weight 400
							color #FFFFFF
							padding 4rpx
							border-radius 8rpx
							transform scale(0.7)
						.green
							background-color rgba(0, 181, 0, 1)
						.orange
							background-color rgba(246, 132, 21, 1)
					.pirce
						font-size 32rpx
						font-family PingFang SC
						font-weight bold
						color #FF4200
					.gratis
						color rgba(51, 51, 51, 1)
				.info_container
					flex 1
					margin-top 15rpx
					font-size 24rpx
					letter-spacing 1rpx
					font-family PingFang SC
					font-weight 400
					color #999999
					.text
						overflow hidden
						text-overflow ellipsis
						display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp 2 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap break-word
				.info_footer
					margin-top 10rpx
					display flex
					justify-content space-between
					.organization
						background-color rgba(37, 143, 255, 0.1)
						font-size 24rpx
						font-family PingFang SC
						font-weight 400
						color #4594FF
						border-radius 10rpx
						padding 3rpx 8rpx
					.count
						font-size 24rpx
						font-family PingFang SC
						font-weight 400
						color #999999
</style>
